<link rel="stylesheet" href="<?php echo $this->CSS_PATH?>/lay_admin.css" media="all">
<link rel="stylesheet" href="<?php echo $this->CSS_PATH?>/template.css" media="all">
<script src="<?php echo Yii::app()->baseUrl?>/static/vue/vue.min.js"></script>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<div class="weadmin-body" id="app">
    <span class="layui-breadcrumb" lay-separator="/">
      <a href="javascript:;">首页</a>
      <a href="<?php echo $this->createUrl('floder/list',array('type'=>'video'))?>">视频集</a>
      <a href="<?php echo $this->createUrl('floder/subList',array('pid'=>$parent_floder->id))?>"><?php echo $parent_floder->name?></a>
      <a><cite><?php echo $sub_floder->name?></cite></a>
    </span>
    <div class="layui-fluid layadmin-cmdlist-fluid">
        <div class="layui-row layui-col-space30">
            <div class="layui-col-12">
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn" id="uplode">
                        <i class="layui-icon">&#xe67c;</i>上传视频
                    </button>
                    <button class="layui-btn layui-btn-danger" id="batch_delete">
                        <i class="layui-icon"></i>批量删除
                    </button>
                    <button type="button" class="layui-btn" @click="selectAll()">
                        <i class="layui-icon">&#xe63c;</i>{{pageList.length == checked_ids.length ? '反选' : '全选'}}
                    </button>
                </div>
            </div>
        </div>
        <div class="layui-row layui-col-space30">
            <div class="layui-col-md2 layui-col-space30" v-for="(v,k) in pageList">
                <div class="cmdlist-container" style="text-align: center">
<!--                    <a href="javascript:;" @click="view(v.id)">-->
                        <video :src="'<?php echo Yii::app()->baseUrl?>'+v.upload_src" width="142" height="142" controls="controls">
                            您的浏览器不支持视屏播放。
                        </video>
<!--                    </a>-->

                    <a href="javascript:;" @click="click_check(v)">
                        <div class="cmdlist-text" v-cloak>
                            <p class="info" v-cloak>{{v.title}}</p>
                        </div>
                    </a>
                    <div class="layui-unselect layui-form-checkbox" :class="{'layui-form-checked':v.is_checked}" lay-skin="primary" @click="click_check(v)">
                        <i class="layui-icon layui-icon-ok"></i>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12 layui-col-sm12" style="background: #fff">
                <div id="pageBox" style="text-align: center"></div>
            </div>
        </div>
    </div>

</div>

<script>
    var app = new Vue({
        el:'#app',
        data:{
            pageList:[],
            checked_ids:[],
            pageObj:null
        },
        methods:{
            click_check:function (v) {
                v.is_checked = !v.is_checked;
                //选中
                if (v.is_checked) {
                    this.checked_ids.push(v.id);
                } else {
                    //取消
                    var index = this.checked_ids.indexOf(v.id);
                    if (index > -1) {
                        this.checked_ids.splice(index, 1);
                    }
                }
            },
            selectAll:function () {
                //选择类型  true反选 false 全选
                var select_all = this.checked_ids.length != this.pageList.length;
                if (!select_all) {
                    this.checked_ids = [];
                }
                var _that = this;
                this.pageList.forEach(function (v) {
                    if (select_all) {
                        var index = _that.checked_ids.indexOf(v.id);
                        if (index == -1) {
                            v.is_checked = true;
                            _that.checked_ids.push(v.id);
                        }
                    } else {
                        v.is_checked = false;
                    }
                });
            }
        }
    });
    layui.extend({
        admin: '<?php echo Yii::app()->baseUrl?>/static/admin/js/admin'
    });
    layui.use(['laypage','jquery','upload','layer','admin'], function() {
        var $ = layui.jquery;
        var upload = layui.upload;
        var laypage = layui.laypage;
        var layer = app.layer = layui.layer;
        var pageObj = app.pageObj = {
            elem: 'pageBox',
            limit: 12,
            limits:[12, 24, 36, 48, 60],
            count: 0, //数据总数
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'],
            jump: function(obj, first) {
                if (!first) {
                    getPageList(obj);
                }
            }
        };

        upload.render({
            elem: '#uplode',
            url : '<?php echo $this->createUrl('video/upload',array('pid'=>$pid));?>',
            multiple:true,
            accept : 'video',
            before:function(obj) {
                layer.load();
            },
            done: function(res, index, upload){
            },
            allDone:function (obj) {
                layer.closeAll();
                pageObj.curr = 1;   //获取第一页数据
                pageObj.count += obj.successful; //上次成功的数量累加到分页的总数
                laypage.render(pageObj);  //重新渲染分页控件
                pageObj.jump(pageObj);  //由于设置了第一页不去获取服务器数据，这里手动去获取
                $msg = '上次完成；总共' + obj.total + '个,';
                $msg += '成功' + obj.successful + '个,';
                $msg += '失败' + obj.aborted + '个,';
                layer.msg($msg, {time:4000, icon:1})
            }
        });

        $('#batch_delete').click(function () {
            if (app.checked_ids.length == 0) {
                layer.msg('未选中任何数据',{time:1500,icon:2});
                return;
            }
            layer.confirm('确认批量删除？', function (index) {
                layer.close(index);
                var url = '<?php echo $this->createUrl('video/batchDelete')?>';
                var load_index = layer.load();
                $.post(url,{id_list:app.checked_ids}, function (data) {
                    layer.close(load_index);
                    if (data.code == 0) {
                        layer.msg(data.message,{time:1500, icon:1});
                        pageObj.curr = 1;   //获取第一页数据
                        pageObj.count -= app.checked_ids.length; //上次成功的数量累加到分页的总数
                        laypage.render(pageObj);  //重新渲染分页控件
                        pageObj.jump(pageObj);  //由于设置了第一页不去获取服务器数据，这里手动去获取
                        app.checked_ids = [];
                    } else {
                        layer.msg(data.message, {time:2000,icon:2});
                    }
                });
            })
        });

        getPageList();
        function getPageList() {
            var url = '<?php echo $this->createUrl('video/list')?>';
            var data = {
                'pid':<?php echo $pid?>,
                'page':pageObj.curr,
                'limit' : pageObj.limit
            };
            var load_index = layer.load();
            $.post(url, data, function (ret) {
                layer.close(load_index);
                if (ret.code != 0) {
                    layer.msg(ret.message, {time:2000, icon:2});
                } else {
                    pageObj.count = ret.count;
                    app.pageList = ret.data; //查询出来的数据交给vue，使用双向数据绑定实现页面图片更新
                    laypage.render(pageObj);
                }
            });
        }
    });
</script>